<template>
	<cl-page background-color="#fff">
		<!-- #ifdef WEB -->
		<shareBtn />
		<!-- #endif -->
		<view class="info">
			<view class="info-description magin-b-10">
				<view v-if="recipeInfo.description" style="margin-bottom:20rpx;">
					<rich-text style="color:#000;" :nodes="recipeInfo.description"></rich-text>
				</view>
				<view>
					<text
						style="font-weight:700">注意：</text>象数助念器APP内所有象数配方仅供有缘人参考，选用任何配方默念请一定先试念（跟着助念器App播放的节奏，一秒钟一个数，静心专注轻声默念，试念20~30分钟左右），试念和默念期间心、头、胃有不适感，请立即停念，切记！
				</view>
				<view>
					<text
						style="font-weight:700">建议：</text>象数与中医同源同理，尊重个体差异，讲究辩证论治，不是千人一方......所以建议请专业配方老师根据您的禀赋体质、身体感受、症状信息等辩证组方。
				</view>
				<view>
					<text style="font-weight:700">声明：</text>象数疗法虽然绿色自然，但也请理性选用，如有个别意外，本站概不负责！
				</view>

			</view>
			<view class="info-numeral">
				<view v-if="recipeInfo.numeral">
					<view class="info-description magin-b-10">
						点击象数即可直接播放
					</view>
					<view class="info-numeral-list uv-border-bottom" v-for="(item,index) in recipeInfo.numeral"
						:key="index" @click='playRecordList(item)'>
						{{item}}
					</view>
				</view>
				<view v-else>
					<uv-empty :text="'暂无象数配方'" :textSize="16"
						icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
				</view>
			</view>
			<!-- 分享 -->
			<share ref="shareTrm" :href="'/#/pages/index/recipeInfo?id='+recipeInfo.id" :title="recipeInfo.name"
				:summary="'【推荐】点击即可助念~经典象数配方、名家辩证参考方、验方……'" :imageUrl="config.tencentCloud+'/info-share.png'" />
		</view>
		<!-- #ifdef APP -->
		<sharePosition @shareTrms="shareTrms" />
		<!-- #endif -->
	</cl-page>
</template>

<script lang="ts" setup>
	import { onReady, onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
	import { useCool, useWx } from "/@/cool";
	import { ref } from "vue";
	import { config } from "/@/config";
	import { useUi } from "/$/cool-ui";
	import shareBtn from "/@/components/share/share-btn.vue"
	import share from "/@/components/share/share.vue"
	import sharePosition from "/@/components/share/share-position.vue"
	import { audioManagerObj, setMusicValueArr, setRecord, formatRichText, tencentUrl } from "/@/cool/utils";
	const { service } = useCool();
	const ui = useUi();
	const wx = useWx();
	const recipeId = ref("") //配方id
	const recipeInfo = ref({})
	const barTitle = ref('配方详情')
	const shareTrm = ref()
	function shareTrms() {
		shareTrm.value.open()
	}

	// 播放播放列表里的数据
	function playRecordList(item : string) {
		// #ifdef WEB
		ui.showToast("请在app上操作")
		return
		// #endif
		audioManagerObj.recordId = recipeInfo.value.id
		audioManagerObj.recordTitle = recipeInfo.value.recipeName
		setMusicValueArr(item + '')
		// #ifndef MP-WEIXIN
		setRecord(item)
		// #endif


	}
	onShareAppMessage(() => {
		return {
			path: "/pages/index/recipeInfo?id=" + recipeId.value,
			title: barTitle.value + '',
			imageUrl:"https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/common_option/wechat_option/share.jpg"
		}
	})
	onShareTimeline(() => {
		return {
			path: "/pages/index/recipeInfo?id=" + recipeId.value,
			title: barTitle.value + '',
				imageUrl:"https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/common_option/wechat_option/share.jpg"
		}
	})
	function getInfo() {
		ui.showLoading("加载中")
		service.broadcast.recipe.getRecipeOrParent({ id: recipeId.value }).then((res : { name : any; numeral : any; description : any }) => {
			if (res.numeral) {
				res.numeral = res.numeral.split(",")
			}
			if (res.description) {
				res.description = formatRichText(res.description)
			}
			recipeInfo.value = res
			uni.setNavigationBarTitle({
				title: res.name
			})
			barTitle.value = res.name
			ui.hideLoading()
		})
	}
	onLoad((res ?: any) => {
		recipeId.value = res?.id
	});
	onReady(() => {
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.magin-b-10 {
		margin-bottom: 10rpx;
	}

	.info {
		padding: 20rpx;

		.info-label {
			font-size: $cl-font-size-lg;
			font-weight: 700;
		}

		.info-type {
			display: flex;
			flex-wrap: wrap;

			.info-type-tags {
				margin-right: 10rpx
			}
		}

		.info-description {
			color: $cl-color-subtitle;
			font-size: $cl-font-size-base;
		}

		.info-numeral {
			margin-top: 50rpx;

			.info-numeral-list {
				padding: 20rpx 0;
				color: $cl-color-imagePlayer-primary !important;
			}
		}

	}
</style>